<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>签名案例</title>
	</head>
	<body>
		<canvas id="canvas" style="border:  1px solid red;"></canvas>
		<button id="button">清除画面</button>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 500;
				canvas.height = 400;
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;

                 airboard();
                //绘制调色板函数
				function airboard() {
					for (var i = 0; i < 6; i++) {
						for (var j = 0; j < 6; j++) {
							cxt.fillStyle="rgb("+(255-30*i)+","+(255-30*j)+",200)";
							cxt.fillRect(j * 25+350, i * 25+250, 25, 25);

						}
					}
				}
				document.onclick = function(e) {
					e: e || event;
					//console.log(e.offsetX);
					//console.log(e.offsetY);
					for (var i = 0; i < 6; i++) {
						for (var j = 0; j < 6; j++) {
//							if(e.offsetX>=25*i&&e.offsetX<=25*i+25&&e.offsetY>=25*j&&e.offsetY25<=25*j+25){
//								console.log(e.offsetX+","+e.offsetY);
//								console.log(i+","+j);
//								cxt.strokeStyle="rgb("+(255-30*i)+","+(255-30*j)+",200)";							
							if (e.offsetX > (j * 25+350) && e.offsetX < (j * 25 +350+ 25) && e.offsetY > (i* 25+250) && e.offsetY < i* 25 + 25+250) {
								console.log(e.offsetX + "," + e.offsetY);
								console.log(i);
								console.log(j);
								cxt.strokeStyle=cxt.fillStyle = "rgb(" + Math.floor(255 - 30 * i) + "," + Math.floor(255 - 30* j) + ",200)";
							}
						}
					}
				}

				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown", downfun);
				canvas.addEventListener("mousemove", movefun);
				canvas.addEventListener("mouseup", upfun);
				//canvas.onmousedown = function() {}
				//canvas.onmousemove = function() {}
				//canvas.onmouseup = function() {}
				var startx;
				var starty;
				var endx;
				var endy;
				cxt.lineWidth = 3;
				var offon = false;

				function downfun(e) {
					offon = true;
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;

				}

				function movefun(e) {
					if (offon == true) {
						cxt.beginPath()
						endx = e.clientX - canvasx;
						endy = e.clientY - canvasy;
						cxt.moveTo(startx, starty);
						cxt.lineTo(endx, endy);
						cxt.stroke();

						startx = endx;
						starty = endy;
						console.log("1111");
					}
				}

				function upfun() {
					offon = false;
					cxt.closePath();
				}
				document.getElementById("button").onclick = function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					 airboard();
				}
			}
		</script>
	</body>
</html>
